<template>
  <h1>已评估的牙齿</h1>
  <el-card v-for="teeth in teeths" style="margin-bottom: 30px; margin-left: 30px; margin-right: 30px; background: #ddecec">
      <template #header>
          <div class="card-header">
              <h3 style="margin-top: 0; margin-bottom: 0; color: grey; text-align: start">
                  {{teeth.name}}
              </h3>
          </div>
      </template>
      <el-descriptions column="2" size="default" border>
          <el-descriptions-item label="用户邮箱">{{ teeth.user_email }}</el-descriptions-item>
          <el-descriptions-item label="用户姓名">{{ teeth.user_name }}</el-descriptions-item>
          <el-descriptions-item label="id">{{ teeth.id }}</el-descriptions-item>
          <el-descriptions-item label="时间">{{ teeth.time }}</el-descriptions-item>
          <el-descriptions-item label="类别">{{ teeth.type }}</el-descriptions-item>
          <el-descriptions-item label="详情">
              <el-button
                      type="primary"
                      style="font-size: 14px; padding-left: 0; padding-right: 0"
                      @click="openTeethDetailPage(teeth.id)"
                      text
              >
                  查看详情
              </el-button>
              <el-button
                      type="primary"
                      style="font-size: 14px; padding-left: 0; padding-right: 0"
                      @click="openTeethTreatPage(teeth.id)"
                      text
              >
                  加入疗程
              </el-button>
          </el-descriptions-item>
      </el-descriptions>
  </el-card>
    <TeethDetailPage
            :visible=teeth_detail_visible
            :id=id
            @close="closeTeethDetailPage">
    </TeethDetailPage>
    <TeethTreatPage
        :visible=teeth_treat_visible
        :id=id
        @add_success="closeTeethTreatPage"
        @close="closeTeethTreatPage">
    </TeethTreatPage>
</template>

<script>
import TeethDetailPage from "@/components/TeethDetailPage.vue";
import axios from 'axios';
import TeethTreatPage from "@/components/TeethTreatPage.vue";

export default {
    name: "DentistTeethList",
    components: {TeethTreatPage, TeethDetailPage},
    data() {
        return {
            teeth_detail_visible: false,
            teeth_treat_visible: false,
            id: 1,
            teeths: [
                {
                    user_email: 'moc85422729@163.com',
                    user_name: '许文冲',
                    name: 'teeth1',
                    id: 1,
                    time: '2023-04-16',
                    type: '上牙'
                },
                {
                    user_email: 'moc85422729@163.com',
                    user_name: '许文冲',
                    name: 'teeth2',
                    id: 2,
                    time: '2023-04-16',
                    type: '下牙'
                }
            ]
        }
    },
    methods: {
        openTeethDetailPage: function (id) {
            this.id = id
            this.teeth_detail_visible = true
        },
        closeTeethDetailPage: function () {
            this.teeth_detail_visible = false
        },
        openTeethTreatPage: function (id) {
            this.id = id
            this.teeth_treat_visible = true
        },
        closeTeethTreatPage: function () {
            this.teeth_treat_visible = false
        }
    },
    created() {
        const _this = this;
        axios.get(process.env.VUE_APP_BASEURL + "teeth/teethListByDentist?email=" + _this.$store.state.username).then(function (resp) {
            if (resp.data.code == 0) {
                _this.teeths = resp.data.data
            }
        })
    }
}
</script>

<style scoped>
h1 {
    font-size: 30px;
}
</style>